<template>
  <div class="recommendContainer" v-if="homeInfo.categoryHotSellModule">
    <!--  轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner, index) in bannerList" :key="banner.id">
        <img :src="banner.picUrl"/>
      </van-swipe-item>
    </van-swipe>
    <!--    //策略描述-->
    <ul class="policyDesc">
      <li class="policyItem" v-for="(policy,index) in homeInfo.policyDescList" :key="index">
        <img class="icon" :src="policy.icon">
        {{ policy.desc }}
      </li>
    </ul>

    <!--中间nav-->
    <div class="navWrap">
      <div class="navItem" v-for="(nav,index) in navList" :key="index">
        <img class="nav_img" :src="nav.picUrl" alt="">
        <span class="nav_title">{{ nav.text }}</span>
      </div>
    </div>
    <!-- 广告-->
    <div class="adv">
      <div class="advItem" :class="{moreImg:adv.cells.length !== 1}" v-for="(adv,index) in advList" :key="adv.taskId">
        <img v-if="adv.cells.length === 1" :src="adv.cells[0].picUrl" alt="" :style="{height:adv.height / 3+'px',width:'375px'}">
        <img
            v-else :src="cell.picUrl"
             v-for="(cell,index) in adv.cells"
            :key="index"
            :style="{height:adv.height / 3+'px',width:345/3+'px'}">
      </div>

    </div>
    <!--  新人专享-->
    <div class="newcomers">
      <div class="newcomers_title">
        — 新人专享礼 —
      </div>
      <div class="newcomers_main">
        <div class="newcomers_main_left">
          <span>新人专享礼</span>
          <img src="https://yanxuan.nosdn.127.net/352b0ea9b2d058094956efde167ef852.png" alt="">
        </div>

        <div class="newcomers_main_right">

          <div class="newcomers_main_left_top">
            <div class="textWrap">
              <p class="text_title">{{ homeInfo.indexActivityModule[0].title }}</p>
              <p class="text_des">{{ homeInfo.indexActivityModule[0].subTitle }}</p>
            </div>
            <div class="img_wrap">
              <img :src="homeInfo.indexActivityModule[0].picUrl" alt="">
              <div class="discount">
                <p>{{ homeInfo.indexActivityModule[0].activityPrice }}</p>
                <p>{{ homeInfo.indexActivityModule[0].originPrice }}</p>
              </div>
            </div>
          </div>

          <div class="newcomers_main_left_down">
            <div class="textWrap">
              <p class="text_title">{{ homeInfo.indexActivityModule[1].title }}</p>
              <p class="text_des">{{ homeInfo.indexActivityModule[1].tag }}</p>
            </div>
            <div class="img_wrap">
              <img :src="homeInfo.indexActivityModule[1].showPicUrl" alt="">
              <div class="discount">
                <p>{{ homeInfo.indexActivityModule[1].activityPrice }}</p>
                <p>{{ homeInfo.indexActivityModule[1].originPrice }}</p>
              </div>
            </div>
          </div>

        </div>

      </div>

    </div>
    <!--  类目热销榜-->
    <lazy-component>
      <div class="categoryHotSellModule">
        <p class="cate_title">{{ homeInfo.categoryHotSellModule.title }}</p>
        <div class="cate_top">
          <div class="cate_top_item">
            <p class="cate_top_item_text">{{ homeInfo.categoryHotSellModule.categoryList[0].categoryName }}</p>
            <img :src="homeInfo.categoryHotSellModule.categoryList[0].picUrl" alt="">
          </div>
          <div class="cate_top_item cate_top_item_2">
            <p class="cate_top_item_text">{{ homeInfo.categoryHotSellModule.categoryList[1].categoryName }}</p>
            <img :src="homeInfo.categoryHotSellModule.categoryList[1].picUrl" alt="">
          </div>
        </div>
        <div class="cate_dowm">
          <div class="cate_dowm_item" v-for="(cate,index) in homeInfo.categoryHotSellModule.categoryList.slice(2)"
               :key="index">
            <p>{{ cate.categoryName }}</p>
            <img :src="cate.picUrl" alt="">
          </div>

        </div>

      </div>
    </lazy-component>
    <!-- 导购模块 -->
    <lazy-component class="shoppingGuideModuleWrap">
      <div class="shoppingGuideModule">
        <div class="shoppingGuide_item" v-for="(shoppingGuide,index) in sceneLightShoppingGuideModule" :key="index">
          <p class="item_title">{{ shoppingGuide.styleItem.title }}</p>
          <p class="item_desc" :style="{color:'#'+shoppingGuide.styleItem.descColor}">{{ shoppingGuide.styleItem.desc }}</p>
          <div class="img_wrap">
            <img :src="shoppingGuide.styleItem.picUrlList[0]" alt="">
            <img :src="shoppingGuide.styleItem.picUrlList[1]" alt="">
          </div>
        </div>
      </div>
    </lazy-component>

<!--   footer-->
    <div class="footer">
      <div class="footer_top">
        <a href="javascript:;">下载APP</a>
        <a href="javascript:;">电脑版</a>
      </div>
      <div class="footer_down">
        网易公司版权所有 © 1997-
        <br>
        食品经营许可证：JY13301080111719
      </div>
    </div>
  </div>
</template>

<script>
import lazyImg from '@/assets/aaa.jpg'
import {mapState} from 'vuex';

export default {
  name: "Recommend",
  data() {
    return {
      lazyImg: lazyImg
    }
  },
  computed: {
    ...mapState({
      homeInfo: state => state.home.homeInfo,
    }),
    //轮播图列表
    bannerList() {
      return this.homeInfo.focusList || []
    },
    //  navList导航列表
    navList() {
      return this.homeInfo.kingKongModule ? this.homeInfo.kingKongModule.kingKongList : []
    },
    // 广告列表
    advList() {
      return this.homeInfo.bigPromotionModule ? this.homeInfo.bigPromotionModule.floorList : []
    },
    //

    sceneLightShoppingGuideModule () {
      if (!this.homeInfo.sceneLightShoppingGuideModule) {
        return []
      }
      return this.homeInfo.sceneLightShoppingGuideModule.filter(item => item.styleItem)
    }

  },

}
</script>

<style lang="less">
.recommendContainer {

  width: 375px;
  padding-bottom: 50px;
  background: #EEEEEE;
  //position: absolute;
  //轮播图
  .my-swipe {
    .van-swipe-item {
      height: 148px;
      width: 375px;
      color: #fff;
      font-size: 20px;
      overflow: hidden;

      img {
        height: 185px;
        width: 375px;
      }
    }

    ::v-deep .van-swipe__indicator {
      border-radius: 0;
    }
  }

  //策略描述
  .policyDesc {
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #ffffff;
    padding: 0 15px;
    height: 36px;

    .policyItem {
      font-size: 12px;

      .icon {
        height: 16px;
        width: 16px;
      }
    }

  }

  // 中间nav导航
  .navWrap {
    height: 186px;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .navItem {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      color: #333333;
      height: 78px;
      width: 55px;
      margin: 5px 10px 4.5px;

      .nav_img {
        height: 55px;
        width: 55px;
        //margin-bottom: 5px;
      }

    }
  }

  // 广告
  .adv {

    width: 375px;
    .advItem{
      display: flex;
      align-items: center;
      justify-content: space-around;
      &.moreImg{
        padding: 10px 10px 20px 10px;
      }

    }

  }

  // 新人专享
  .newcomers {
    height: 279px;
    width: 375px;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

    .newcomers_title {
      height: 45px;
      width: 375px;
      background-color: #ffffff;
      font-size: 16px;
      color: #333333;
      line-height: 45px;
      text-align: center;
    }

    .newcomers_main {
      display: flex;
      align-items: center;
      height: 219px;
      width: 375px;
      box-sizing: border-box;
      padding: 0 15px;

      .newcomers_main_left {
        background: #f9e9cf;
        height: 217px;
        width: 171.5px;
        display: flex;
        flex-direction: column;
        margin-right: 2px;
        //align-items: center;
        border-radius: 5px;

        span {
          padding: 15px 0 20px 15px;
          font-size: 16px;
          color: #333333;
        }

        img {

          width: 129px;
          height: 129px;
          align-self: center;

        }
      }

      .newcomers_main_right {
        height: 219px;

        .newcomers_main_left_top {
          position: relative;
          width: 171.5px;
          height: 107.5px;
          background: #fbe2d3;
          margin-top: 1px;
          display: flex;
          align-items: center;
          padding: 10px 0 0 15px;
          box-sizing: border-box;
          border-radius: 5px;

          .textWrap {
            //width: 50%;
            position: relative;
            height: 100%;

            .text_title {
              font-size: 16px;
              color: #333333;
            }

            .text_des {
              color: #7f7f7f;
              font-size: 12px;
              margin-top: 5px;
            }
          }

          .img_wrap {
            height: 100%;
            //width: 50%;
            position: absolute;
            right: 0;
            top: 7px;

            img {
              width: 100px;
              height: 100px;
            }

            .discount {
              position: absolute;
              top: 0;
              right: 7px;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #f59524;
              opacity: .8;
              font-size: 12px;
              color: #ffffff;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-right: 3px;

              p:nth-child(2) {
                text-decoration-line: line-through;
              }

            }
          }

        }

        .newcomers_main_left_down {
          position: relative;
          width: 171.5px;
          height: 107.5px;
          background: #fbe2d3;
          margin-top: 1px;
          display: flex;
          align-items: center;
          padding: 10px 0 0 15px;
          box-sizing: border-box;
          border-radius: 5px;

          .textWrap {
            //width: 50%;
            position: relative;
            height: 100%;

            .text_title {
              font-size: 16px;
              color: #333333;

            }

            .text_des {
              color: #ffffff;
              font-size: 12px;
              margin-top: 5px;
              background: #cbb693;
              text-align: center;
              height: 16px;
              line-height: 16px;

            }
          }

          .img_wrap {
            height: 100%;
            //width: 50%;
            position: absolute;
            right: 0;
            top: 7px;

            img {
              width: 100px;
              height: 100px;
            }

            .discount {
              position: absolute;
              top: 0;
              right: 7px;
              width: 40px;
              height: 40px;
              border-radius: 50%;
              background: #f59524;
              opacity: .8;
              font-size: 12px;
              color: #ffffff;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              margin-right: 3px;

              p:nth-child(2) {
                text-decoration-line: line-through;
              }


            }
          }

        }

      }

    }

  }

  //  类目热销榜
  .categoryHotSellModule {
    width: 375px;
    height: 355px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff;
    margin-top: 15px;
    padding: 0 15px;

    .cate_title {
      width: 375px;
      height: 50px;
      line-height: 50px;
      font-size: 16px;
      color: #333333;
    }

    .cate_top {
      width: 375px;
      height: 100px;
      //background: skyblue;
      //margin-right: 15px;
      display: flex;

      .cate_top_item {
        position: relative;
        width: 170px;
        height: 100px;
        background: #f9f3e4;
        overflow: hidden;
        margin: 0 5px 5px 0;

        .cate_top_item_text {
          position: relative;
          font-size: 14px;
          color: #333333;
          margin-top: 33px;
          padding-left: 12px;
          //overflow: hidden;
          &::before {
            content: "";
            display: block;
            width: 24px;
            height: 2px;
            background: black;
            position: absolute;
            bottom: -10px;
          }

        }

        img {
          position: absolute;
          top: 0;
          right: 0;
          width: 100px;
          height: 100px;

        }
      }

      .cate_top_item_2 {
        background: #ebeff6;
      }

    }

    .cate_dowm {
      margin-top: 5px;
      display: flex;
      flex-wrap: wrap;
      width: 375px;
      background-color: #fff;
      align-items: center;

      .cate_dowm_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 5px 5px 0;
        background: #f5f5f5;
        height: 90px;
        width: 82.5px;

        p {
          font-size: 12px;
          color: #333333;
          margin-top: 5px;
        }

        img {
          width: 60px;
          height: 60px;
        }

      }
    }

  }

  // 导购模块
  .shoppingGuideModuleWrap {
    background-color: #ffffff;
    height: 155px;
    width: 375px;
    margin-top: 15px;
    padding: 5px 15px 15px 13px;

    .shoppingGuideModule {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      width: 375px;
      //height: 132px;
      background-color:#ffffff;
      padding:10px 0 20px 0;

      .shoppingGuide_item{
        width: 171.5px;
        height: 132px;
        border-radius:3px;
        padding:10px 0 0 10px;
        margin: 2px 0 0 2px;
        background-color: #f5f5f5;
        box-sizing: border-box;
        .item_title{
          font-size: 16px;
          color: #333333;
        }
        .item_desc{
          font-size: 12px;
          margin: 7px 0;
        }
        .img_wrap{
          //padding-top: 10px;
          display: flex;
          align-items: flex-end;
          justify-content:space-around;
          img{
            width: 75px;
            height: 75px;
          }
        }
      }

    }
  }
//  footer
  .footer{
    width: 375px;
    height: 122px;
    border-top: 1px solid rgba(0,0,0,.15);
    background-color: #414141;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .footer_top{
      height: 31px;
      width: 375px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 18px;
      a{
        display:block;
        color:#ffffff;
        font-size:12px;
        height: 31px;
        width: 86px;
        box-sizing: border-box;
        border:1px solid #ffffff;
        border-radius:6px;
        text-align: center;
        line-height:31px;
        &:nth-child(1){
          margin-right: 15px;
        }
      }
    }

    .footer_down{
      color:#999999;
      font-size:12px;
      text-align: center;
      line-height:15px;
    }
  }
}

</style>
